<template>
<!-- 搜索页面 -->
    <div class="search">
        <div class="searchtop">
            <div class="logosearch">
                <img src="../assets/img/sosu.gif" alt="">
            </div>
            <div class="searchbox">
                <input type="text" placeholder=" 输入菜名、食材、作者" class="searchitem" v-model="value" @keyup.enter="but">
                <input type="submit" value="搜索" class="searchbutton" @click="but">
            </div>
        </div>
        <div class="searchlists">
            <p>搜索相关：<span>家常菜</span></p>
            <div class="searchdiv" v-for="(item,index) in datalists" :key="index" @click="content(index)">
                <img :src="item.imgurl" alt="">
                <div class="texts">
                    <h2>{{item.title}}</h2>
                    <p>{{item.introduce}}</p>
                </div>
            </div>
        </div>
        <div class="tips" v-show="this.num">
            <p>没有更多的项目或作者...</p>
        </div>
        <div class="ssbottom">
        <div>
          <router-link tag="a" to="/home"  class="exit"> 美食圈首页 </router-link>
        </div>
        <p class="text">
          版权所有 © 2022
          <a href="" title="" class="text-gray">（meishiq.com）美食圈</a>
        </p>
      </div>
    </div>
</template>

<script>
import { gethomedata } from "../api/home.js";
    export default {
        data() {
            return {
                data:null,
                value: null,
                datalists:null,
                num:false,
            };
        },
        methods:{
            // 模糊搜索
            but(){
                this.datalists = [];
                this.data.map(item => {
                    if (item.title.indexOf(this.value) !== -1) {
                        this.datalists.push(item);
                    }
                });
                if(this.datalists.length==0){
                    this.num=true;
                }else{
                    this.num=false;
                }
                console.log(this.datalists.length);
                console.log(this.value);
                console.log(this.data);
                console.log(this.num);
            },
            // 传index跳转详情
            content(index) {
                // this.$emit('listsadd',this.datalist);
                // console.log(this.datalist);
                let item = this.datalists;
                console.log(item);
                this.$router.push({ path: "specifics", query: { index, item } });
                window.scrollTo(0, 0);
            },
        },
        created(){
            gethomedata().then(data=>{
                this.data = data.breakfast;
            });
            if("item" in this.$route.query){
                let {item} =this.$route.query;
                this.value=item;
            }
            
        }
    }
</script>

<style lang="scss" >
.searchtop{
    padding: 16px;
    .logosearch{
        margin: 16px 0;
        text-align: center;
        img{
            width: 25%;
        }
    }
    .searchbox{
        width: 100%;
        .searchitem{
            height: 38px;
            width: 80%;
            border: 0px;
            font-size: 14px;
            text-indent: 1em;
            // border-top-left-radius: 19px ;
            // border-bottom-left-radius: 19px ;
        }
        .searchbutton{
            height: 38px;
            width: 20%;
             border: 0px;
             background-color: #c63300;
             color: #fff;
             font-size: 14px;
            //  border-top-right-radius: 19px ;
            //  border-bottom-right-radius: 19px ;
        }
    }
}
.searchlists{
    padding: 0 16px;
    p{
        color: #212529;
        font-size: 16px;
        span{
            color: #666;
            font-size: 16px;
        }
    }
}
.tips p{
    margin: 10px 0px;
    text-align: center;
    margin-bottom: 16px;
}
.searchdiv{
    width: 100%;
    // background-color: #fff;
    padding: 16px 0;
    border-bottom: 1px solid #999;
    img{
        width: 20%;
        margin-right: 16px;
        border-radius: 10px;
    }
    .texts{
        width: 75%;
        display: inline-block;
        height: 100%;
        h2{
            font-size: 16px;
            width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-bottom:8px ;
        }
        p{
            font-size: 14px;
            width: 100%;
            height: 36px;
            text-overflow: ellipsis;
            overflow: hidden;
            // white-space: nowrap;
            line-height: 18px;
        }
    }
}


.ssbottom{
    // background-color: #fff;
    width: 100%;
    text-align: center;
}
.ssbottom .exit{
    margin: 16px 0;
    display: inline-block;
    background: #e2143f;
    border-radius: 20px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    width: 60%;
}
.ssbottom p{
    width: 100%;
    height: 24px;
    line-height: 24px;
    color: #999;
    font-size: 16px;
}
.ssbottom p a{
    color: #999;
}
</style>